<style>
    .layui-table th {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-table td {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-input-my {
        height: 34px !important;
        line-height: 34px !important;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
    }

    .special-label {
        float: left;
        display: block;
        padding: 9px 0 !important;
        width: 100px !important;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }
</style>
<div class="layui-form" lay-filter="form-producer">

    <fieldset class="layui-elem-field">
        <legend>项目基础信息</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" autocomplete="off" lay-verify="required" placeholder="请输入服务项目"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">项目描述</label>
                <div class="layui-input-block">
                    <input type="text" name="description" autocomplete="off" lay-verify="required"
                           placeholder="请输入服务项目描述"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="loadIp" autocomplete="off" lay-verify="required" placeholder="请输入服务地址"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">负载均衡地址或单节点地址</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务类型</label>
                <div class="layui-input-block">
                    <select name="protocol" id="protocol" lay-verify="required">
                        <option value="">请选择服务类型</option>
                        <option value="HTTP">HTTP</option>
                        <option value="WEBSERVICE">WEBSERVICE</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">数据格式</label>
                <div class="layui-input-block">
                    <select name="translateProtocol" id="translateProtocol" lay-verify="required">
                        <option value="">请选择数据格式</option>
                        <option value="XML">XML</option>
                        <option value="JSON">JSON</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="enable" value="1" title="启用" checked="">
                    <input type="radio" name="enable" value="0" title="禁用">
                </div>
            </div>

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>负载节点配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">负载策略</label>
                <div class="layui-input-block">
                    <select name="strategy" id="strategy" lay-verify="required">
                        <option value="">请选择负载策略</option>
                        <option value="hash">IP HASH</option>
                        <option value="random">RANDOM</option>
                        <option value="roundRobin">ROUND ROBIN</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">重试次数</label>
                <div class="layui-input-block">
                    <input type="number" name="retryTime" placeholder="请输入重试次数" class="layui-input"
                           min="0" max="1000" lay-verType="tips" lay-verify="number" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">节点配置</label>
                <div class="layui-input-block">
                    <input name="loadBalanceIdArray" id="loadBalanceIdArray" type="hidden"/>
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                        <thead>
                        <tr>
                            <th>
                                <div class="layui-table-cell"><span>服务地址</span></div>
                            </th>
                            <th>
                                <div class="layui-table-cell"><span>服务权重</span></div>
                            </th>
                            <th>
                                <div class="layui-table-cell" style="text-align: right;">
                                    <a class="layui-btn layui-btn-normal layui-btn-xs" id="dataAdd">
                                        <i class="layui-icon layui-icon-add-1"></i>添加
                                    </a>
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="loadBalanceDataTable"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </fieldset>


<!--    <fieldset class="layui-elem-field">-->
<!--        <legend>熔断/降级配置</legend>-->
<!--        <div class="layui-field-box">-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">groupKey</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="groupKey" value="project-group" autocomplete="off" lay-verify="required"-->
<!--                           placeholder="请输入commandKey"-->
<!--                           class="layui-input">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">commandKey</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="commandKey" value="project-command" autocomplete="off"-->
<!--                           lay-verify="required"-->
<!--                           placeholder="请输入commandKey"-->
<!--                           class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">短路最小请求数</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="number" name="requestVolumeThreshold" value="20" placeholder="请输入短路最小请求数"-->
<!--                           class="layui-input"-->
<!--                           min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">失败百分比阈值</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="number" name="errorThresholdPercentage" value="80" placeholder="请输入失败百分比阈值"-->
<!--                           class="layui-input"-->
<!--                           min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">休眠重试间隔</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="number" name="sleepWindowInMilliseconds" value="1000" placeholder="请输入休眠重试间隔"-->
<!--                           class="layui-input"-->
<!--                           min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">请求超时时间</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="number" name="timeoutInMilliseconds" value="20000" placeholder="请输入请求超时时间"-->
<!--                           class="layui-input"-->
<!--                           min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </fieldset>-->


    <fieldset class="layui-elem-field">
        <legend>灰度发布配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label special-label">目标服务地址</label>
                <div class="layui-input-block">
                    <input type="text" name="server" autocomplete="off" placeholder="请输入目标服务地址" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">分流IP地址</label>
                <div class="layui-input-block">
                    <input name="grayIpIdArray" id="grayIpIdArray" type="hidden"/>
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                        <thead>
                        <tr>
                            <th>
                                <div class="layui-table-cell"><span>ip地址</span></div>
                            </th>
                            <th>
                                <div class="layui-table-cell" style="text-align: right;">
                                    <a class="layui-btn layui-btn-normal layui-btn-xs" id="grayAdd">
                                        <i class="layui-icon layui-icon-add-1"></i>添加
                                    </a>
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="grayIpTable"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </fieldset>


    <input type="button" lay-submit lay-filter="LAY-producer-add-submit" value="添加服务项目"
           class="layui-btn layui-btn-fluid">
</div>

<script>
    layui.use(['admin', 'form', 'setter'], function () {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , setter = layui.setter;

        var apiUrl = setter.apiUrl;


        var grayIpId = 0;
        var loadBalanceId = 0;

        var grayIpIdArray = [];
        var loadBalanceIdArray = [];

        initForm();

        function initForm() {
            addLoadBalanceItem(true);
            form.render();
        }

        $('#dataAdd').on('click', function () {
            addLoadBalanceItem(true);
        })
        $('#grayAdd').on('click', function () {
            addGrayIpItem(true);
        })

        $('body').off('click', '.btn-del-balance').on("click", ".btn-del-balance", function () {
            if (loadBalanceIdArray.length === 1) {
                layer.msg('必须至少存在一个节点', {
                    offset: '15px', icon: 1, time: 1000
                });
                return;
            }
            let delObj = $($(this)).parent().parent();
            let balanceId = delObj.attr("balanceId");
            removeByVal(loadBalanceIdArray, balanceId);
            $('#loadBalanceIdArray').val(loadBalanceIdArray.join());
            delObj.remove();
            layer.closeAll('dialog');
        });

        $('body').off('click', '.btn-del-gray').on("click", ".btn-del-gray", function () {
            let delObj = $($(this)).parent().parent();
            let grayId = delObj.attr("grayId");
            removeByVal(grayIpIdArray, grayId);
            $('#grayIpIdArray').val(grayIpIdArray.join());
            delObj.remove();
            layer.closeAll('dialog');
        });


        function addLoadBalanceItem(canDel) {
            $('#loadBalanceDataTable').append(generatorBalanceHtml(getLoadBalanceId(), canDel));
        }

        function generatorBalanceHtml(id, canDel) {
            loadBalanceIdArray.push(id);
            $('#loadBalanceIdArray').val(loadBalanceIdArray.join());
            let delHtml = '';
            if (canDel) {
                delHtml +=
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-del-balance">' +
                    '     <i class="layui-icon layui-icon-delete"></i>删除' +
                    '</button>';
            } else {
                delHtml +=
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-del-balance" disabled>' +
                    '     <i class="layui-icon layui-icon-delete"></i>删除' +
                    '</button>';
            }
            return '' +
                '<tr balanceId="' + id + '">' +
                '    <td>' +
                '        <input type="text"  name="server[' + id + ']" ' +
                '           class="layui-input layui-input-my" lay-verType="tips" lay-verify="required"' +
                '           id="server' + id + '" >' +
                '    </td>' +
                '    <td>' +
                '        <input type="number" name="weight[' + id + ']" ' +
                '           class="layui-input layui-input-my" min="0" max="1000" ' +
                '           lay-verType="tips" lay-verify="number" lay-verify="required"' +
                '           id="weight' + id + '" >' +
                '    </td>' +
                '    <td style="text-align: center">' +
                delHtml +
                '   </td>' +
                '</tr>';
        }

        function addGrayIpItem(canDel) {
            $('#grayIpTable').append(generatorGrayHtml(getGrayIpId(), canDel));
        }

        function generatorGrayHtml(id, canDel) {
            grayIpIdArray.push(id);
            $('#grayIpIdArray').val(grayIpIdArray.join());
            let delHtml = '';
            if (canDel) {
                delHtml +=
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-del-gray">' +
                    '     <i class="layui-icon layui-icon-delete"></i>删除' +
                    '</button>'
            } else {
                delHtml +=
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-del-gray" disabled>' +
                    '     <i class="layui-icon layui-icon-delete"></i>删除' +
                    '</button>'
            }
            return '' +
                '<tr grayId="' + id + '">' +
                '    <td>' +
                '        <input type="text"  name="ip[' + id + ']" ' +
                '           class="layui-input layui-input-my" lay-verType="tips" lay-verify="required"' +
                '           id="server' + id + '" >' +
                '    </td>' +
                '    <td style="text-align: center">' +
                delHtml +
                '    </td>' +
                '</tr>';
        }


        function getGrayIpId() {
            return grayIpId++;
        }

        function getLoadBalanceId() {
            return loadBalanceId++;
        }

        function removeByVal(arryList, val) {
            for (var i = 0; i < arryList.length; i++) {
                if (arryList [i] == val) {
                    arryList.splice(i, 1);
                    break;
                }
            }
        }

    });
</script>